<template>
  <div class="detail-wrap" v-loading="loading">
    <div v-tit="'对接场景信息77'">
      <GForm ref="detail" :config="formConfig" inline disabled :rules="formRules" v-model="form"></GForm>
    </div>
    <div v-tit="'报文信息'">
      <!-- <el-upload class="import-btn" action="/" :http-request="customUpload" name="multipartFile" :show-file-list="false" :on-success="getInfoById">
        <el-button type="text">导入报文配置</el-button>
      </el-upload> -->
      <el-row :style="{height:calcHeight(300) + 'px',overflow:'auto'}">
        <el-col :span="12">
          <div class="col-content">
            <p>
              <span>目标API</span>
              <!-- <el-select v-model="form.targetApiId" placeholder="" clearable filterable @change="getApiBodyById(1)">
                <el-option v-for="item in options.api" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select> -->
            </p>
            <div class="tem-wrap">{{targetBody.tTemplate}}</div>
            <ul class="target-list">
              <li v-for="(target,t) in targetBody.targetStructureList" :key="target.targetFieldPath + '' + t">
                <p><span class="target-field">{{target.targetFieldName}}</span></p>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="col-content">
            <p>
              <span>SQL查询数据</span>
              <!-- <el-select v-model="form.sourceApiId" placeholder="" clearable filterable @change="getApiBodyById(2)">
                <el-option v-for="item in options.api" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select> -->
            </p>
            <div class="tem-wrap">{{sourceBody.sTemplate}}</div>
            <ul class="source-list">
              <li v-for="(target,t) in targetBody.targetStructureList" :key="target.fieldFullPath + '' + t">
                <el-select v-model="target.sourceField" placeholder="" clearable filterable>
                  <el-option v-for="(item,index) in sourceBody.sourceSelecter" :key="item.code + item.name + index" :label="item.name" :value="item.name">
                  </el-option>
                </el-select>
                <el-switch v-model="target.checknull" active-value="true" inactive-value="false" active-text="不可为空" inactive-text="可以为空">
                </el-switch>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="footer">
      <!-- <el-button type="primary" @click="handleExport()">导出</el-button> -->
      <el-button type="primary" @click="handleConfirm()">确定</el-button>
      <el-button @click="$router.push('/app/apiScene')">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'matchup',
  data() {
    return {
      queryId: null,
      form: {
        companyId: null,
        linkName: null,
        linkStatus: '50501',
        linkDesc: null,
        aboveCompanyId: null,
        aboveCompanyNo: null,
        aboveCompanyName: null,
        applicationStatus: null,
        aboveApplicationId: null,
        aboveApplicationNo: null,
        aboveApplicationName: null,
        belowCompanyId: null,
        belowCompanyNo: null,
        belowCompanyName: null,
        belowApplicationId: null,
        belowApplicationNo: null,
        belowApplicationName: null,
        items: []
      },
      sourceBody: {},
      targetBody: {},
      options: {
        api: [],
        appLinkDtl: [],
        appLink: []
      },
      loading: false
    }
  },
  computed: {
    
    formConfig() {
      return [
        {
          label: '任务名称',
          prop: 'jobName',
          type: 'input'
        },
        {
          label: '任务分组',
          prop: 'jobGroup',
          type: 'input'
        },
        {
          label: '任务类型',
          prop: 'jobType',
          type: "select",
          options: [
            { label: "自定义定时任务", value: "0" },
            { label: "api定时任务", value: "1" },
            { label: "insert定时任务", value: "2" },
          ],
        },
      ]
    },
    formRules() {
      return {
        linkName: [
          {
            required: true,
            message: '请填写关联名称',
            trigger: 'blur'
          }
        ],
        linkStatus: [
          {
            required: true,
            message: '请选择启用状态',
            trigger: 'change'
          }
        ],
        aboveApplicationId: [
          {
            required: true,
            message: '请选择上位应用',
            trigger: 'change'
          }
        ],
        belowApplicationId: [
          {
            required: true,
            message: '请选择下位应用',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    customUpload(params) {
      const fd = new FormData()
      fd.append(params.filename, params.file)
      this.loading = true
      return this.$post('/v1/edi/PlApiMappingStructure/upload', fd)
    },
    handleExport() {
      const mappingid = this.queryId
      this.$api({
        url: '/v1/edi/PlApiMappingStructure/download/structureExcel',
        params: { mappingid },
        responseType: 'arraybuffer'
      }).then(response => {
        const { apiMappingName } = this.form
        if (window.navigator.msSaveBlob) {
          var blobObject = new Blob([response.data])
          window.navigator.msSaveBlob(
            blobObject,
            `${apiMappingName}报文信息.xls`
          )
          return Promise.resolve(response)
        } else {
          var blob = new Blob([response.data], {
            type:
              'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'
          })
          var filename = `${apiMappingName}报文信息.xls`
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.style.display = 'none'
          downloadElement.href = href
          downloadElement.download = filename //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
          return Promise.resolve(response)
        }
      })
    },
    handleConfirm() {
      const params = this.cloneDeep(this.form)
      // const sourceApiObj = this.options.api.find(
      //   opt => opt.value == params.sourceApiId
      // )
      // params.sourceApiName = sourceApiObj.apiName
      // const targetApiObj = this.options.api.find(
      //   opt => opt.value == params.targetApiId
      // )
      // params.targetApiName = targetApiObj.apiName
      params.details = this.targetBody.targetStructureList
      this.$post('/v1/edi/plJobmapping/editPlApiMapping', params).then(res => {
        this.$message.success(res.returnMgr)
        this.getInfoById()
      })
    },
    getApiBodyById(type) {
      const { sourceApiId, targetApiId } = this.form
      const params = { sourceApiId, targetApiId }
      this.$post(
        '/v1/edi/PlApiMappingStructure/selectPlApiInfoById',
        params
      ).then(res => {
        const {
          sTemplate,
          sourceSelecter,
          tTemplate,
          targetStructureList
        } = res.data.item
        this.sourceBody = { sTemplate, sourceSelecter }
        this.targetBody = { tTemplate, targetStructureList }
      })
    },
    getOptions() {
      this.$post('/v1/plApplication/selectPlApplicationList', {
        pageNum: 1,
        pageSize: 999
      }).then(res => {
        const data = res.data.page.records
        this.options.appLink = data.map(i => {
          i.label = i.applicationName
          i.value = i.id
          return i
        })
      })
      this.$post('/v1/plApplicationEnvironment/selectList', {
        pageNum: 1,
        pageSize: 999
      }).then(res => {
        const data = res.data.page.records
        this.options.appLinkDtl = data.map(i => {
          i.label = i.environmentName
          i.value = i.id
          return i
        })
      })
      this.$post('/v1/edi/apibaseinfo/selectPlApibaseinfoList', {
        pageNum: 1,
        pageSize: 999
      }).then(res => {
        const data = res.data.page.records
        this.options.api = data.map(i => {
          i.label = i.apiName
          i.value = i.id
          return i
        })
      })
    },
    getInfoById() {
      this.$post('/v1/edi/plJobmapping/selectFieldMapping', {
        jobId: this.form.id
      }).then(res => {
        let {
          sTemplate,
          sourceSelecter,
          tTemplate,
          targetStructureList
        } = res.data.item
        this.sourceBody = { sTemplate, sourceSelecter }
        this.targetBody = { tTemplate, targetStructureList }
      })
    }
  },
  created() {
    this.form  = this.$route.query
    this.getInfoById()
    this.getOptions()
  }
}
</script>

<style lang="scss" scoped>
.detail-wrap {
  height: 100%;
  position: relative;
  .col-content {
    padding: 10px;
    span {
      display: inline-block;
      min-width: 72px;
    }
  }
  .import-btn {
    position: absolute;
    right: 20px;
    top: 0;
  }
  .tem-wrap {
    height: 160px;
    overflow: auto;
    padding: 10px;
    margin: 10px 0;
    border: 1px dashed #999;
    border-radius: 6px;
  }
  .target-list {
    line-height: 36px;
    padding-left: 2em;
    li {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        width: calc(100% - 3em);
        height: 1px;
        background: #999;
        left: 4em;
        top: 18px;
        z-index: 1;
      }
    }
    .target-field {
      position: relative;
      z-index: 99;
      background: #fff;
      padding-right: 1em;
    }
  }
  .source-list {
    .el-select {
      margin: 4px;
      width: 180px;
    }
  }
  .source-title {
    line-height: 36px;
    span {
      display: inline-block;
      padding-left: 10px;
    }
  }
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #f4f4f4;
    text-align: center;
    padding: 10px 0;
    z-index: 9999;
  }
}
</style>
